<script lang="ts" setup>
    import BottomPage from './BottomPage.vue'
    const emit = defineEmits(['pageQuery', 'query', 'update:pageData'])
   const props = defineProps({
       loading: {
           type: Boolean,
           default: false
       },
       pageData: {
           type: Object,
           default: function () {
               return {}
           }
       },
       showPage: {
           type: Boolean,
           default: true
       },
       back: {
           type: Boolean,
           default: false
       }
   })
   const pageChangeHandler = () => {
     emit('pageQuery')
   }
    const queryHandler = () => {
        emit('query')
    }
</script>

<template>
  <v-page class="page-list-container">
    <div class="ctr-box">
      <div class="left-control">
        <slot name="search" />
      </div>
      <div class="space-mid" />
      <div class="right-control">
        <slot name="control" />
      </div>
    </div>
    <div class="data-list">
      <div class="list-box">
        <div v-if="back" class="list-back" />
        <slot />
      </div>
      <div v-if="showPage" class="bottom-box">
        <slot name="page">
          <bottom-page :page-data="pageData"
                       @query="queryHandler"
                       @page-query="pageChangeHandler" />
        </slot>
      </div>
    </div>
    <v-loading v-if="loading" />
  </v-page>
</template>

<style scoped lang="scss">
  .page-container{
    @include abs-group();
    @include ver-group();
    padding: 0 15px 20px 15px;
    box-sizing: border-box;

    .ctr-box{
      @include hor-group();
      flex:none;
      width:100%;
      height:50px;

      .left-control{
        @include hor-group();
        flex:none;
      }
      .space-mid{
        flex:auto;
        width:100%;
      }

      .right-control{
        @include hor-group(end);
        flex:none;
      }
    }

  }

  .data-list{
    @include ver-group() ;
    flex:auto;
    width:100%;
    height:calc(100% - 60px);

    .list-box{
      flex:auto;
      width:100%;
      height:100%;
      overflow: hidden;
      position:relative;
      .list-back{
        @include abs-group();
        background: #fff;
        border:1px solid #ebeef5;
        box-sizing: content-box;
      }
    }
    .bottom-box{
      @include hor-group(center) ;
      flex:none;
      width:100%;
      margin-top: 20px;
    }
  }

  .col-btn-box{
    @include hor-group(center) ;
    flex:none;
    width:100%;
    .icon-btn-tb {
      font-size:18px;
      color:$f-color-nor2;
      padding: 0 10px;
      box-sizing: border-box;
      &:hover{
        color:$f-color-light;
      }
    }

  }

</style>
